<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="public.css">
    <style>
       

        .header {
            background-color: rgb(35, 34, 34);
            display: flex;
            justify-content: space-between;

            align-items: center;
        }

        .contentss {
            display: flex;
            /* NO NEED */
            position: relative;
            /* 为了作为二级菜单的定位参考 */
            
        }
       

        .contentss a {
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 15px;
            padding-right: 15px;
            color: rgb(241, 233, 234);
            text-decoration: none;
            align-items: center;
            cursor: pointer;
        }

        .contentss span {
            padding-top: 5px;
            padding-bottom: 0px;
            padding-left: 15px;
            padding-right: 15px;
            color: rgb(241, 233, 234);
            text-decoration: none;
            align-items: center;
            cursor: pointer;
        }

        .submenu {
            background-color: black;
            position: absolute;
            top: 25.52px;
            right: 0;
            display: none;
            /* 隐藏状态 */
        }

        .submenu a {
            /* 后带选择器 */
            display: block;
            /* 为了自动换行 */
            color: aliceblue;
            text-decoration: none;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 15px;
            padding-right: 15px;

        }
        .workplace{
            height: 100%;
        }
        .active {
            border-bottom: 2px rgb(250, 250, 97) solid;
        }
        .contentss:hover .submenu{
            /* 在鼠标移动到contentess的时候，期内submenu显示下面的效果 */
            display: block;
        }
      
    </style>
</head>

<body>
    <div class="header">
        <section class="contentss">
            <!-- inline元素设置宽高并无作用 -->
            <a href="2.2login.html" class="active" target="not">GRTS-MMS</a>
            <a href="#">仪表盘</a>
            <a href="2.4 表单页.html" target="not">录入客户信息</a>
            <a href="2.5 查看用户信息.html" target="not">查看客户信息</a>
            <!-- 是同一个就可以了 -->
        </section>
        <section class="contentss">
            <span>我是头像！</span>
            <span>欢迎您,lucy</span>
            <span>我是箭头！</span>
            <!-- 二级菜单，修改密码和退出系统 -->
            <div class="submenu">
                <a href="#" style="font-size: small;">change password</a>
                <a href="#">log out</a>
            </div>

        </section>
    </div>
    <div class="workplace">
        <iframe name="not" src="" frameborder="0" width="100%" height="700"></iframe>
    </div>
</body>

</html>